import React, { Component } from 'react'

// 引入组件
import { Carousel, Grid, Flex, WhiteSpace } from 'antd-mobile';
// 引入 axios
import axios from 'axios';
// 引入样式
import './index.scss'

// 引入图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

// 导航栏数据
const navs = [
  { img: Nav1, title: '整租', path: '/home/rent' },
  { img: Nav2, title: '合租', path: '/home/rent' },
  { img: Nav3, title: '地图找房', path: '/map' },
  { img: Nav4, title: '去出租', path: '/home/rent' }
]


const data = Array.from(new Array(9)).map((_val, i) => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
  text: `name${i}`,
}));

const data1 = Array.from(new Array(9)).map(() => ({
  icon: 'https://gw.alipayobjects.com/zos/rmsportal/WXoqXTHrSnRcUwEaQgXJ.png',
}));
export default class Index extends Component {
  state = {
    slideshow: [],  // 轮播图数据
    group: [], // 租房小组数据
    advisory: [],  //最新资讯
    cityInfo: ''   // 当前城市名字
  }
  componentDidMount() {
    // 轮播图
    this.gitSlideshow()
    this.getGroup()
    this.getAdvisory()
    // 获取城市
    var myCity = new window.BMap.LocalCity();
    myCity.get(async result => {
      // 发送请求
      const res = await axios.get('http://localhost:8080/area/info', {
        params: {
          name: result.name
        }
      })
      this.setState({
        cityInfo: res.data.body
      })
    });
  }
  // 实现轮播图
  async gitSlideshow() {
    const res = await axios.get('http://localhost:8080/home/swiper')
    this.setState({
      slideshow: res.data.body
    })
  }
  // 实现租房小组
  async getGroup() {
    const res = await axios(`http://localhost:8080/home/groups`, {
      params: {
        area: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    this.setState({
      group: res.data.body
    })
  }
  // 最新资讯
  async getAdvisory() {
    const res = await axios.get('http://localhost:8080/home/news', {
      params: {
        aren: 'AREA%7C88cff55c-aaa4-e2e0'
      }
    })
    this.setState({
      advisory: res.data.body
    })
  }
  // 轮播图列表渲染
  renderSlideshow() {
    if (this.state.slideshow.length) {
      return <Carousel
        autoplay={true}
        infinite
      >
        {this.state.slideshow.map(val => (
          <a
            key={val.id}
            href="http://www.alipay.com"
            style={{ display: 'inline-block', width: '100%', }}
          >
            <img
              src={`http://localhost:8080${val.imgSrc}`}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}

      </Carousel>
    }
    return null
  }
  // 导航栏渲染列表
  renderNavs() {
    return <Flex className='flex-nav'>
      {navs.map((item, i) => (
        // 点击跳转页面
        <Flex.Item key={i} onClick={() => (this.props.history.push(item.path))}>
          <img src={item.img} />
          <h2>{item.title}</h2>
        </Flex.Item>
      ))}
    </Flex>
  }

  render() {
    return (
      <div className='index'>
        {/* 实现录播图 */}
        <div className='index-slideshow'>{this.renderSlideshow()}
          {/* 搜索框部分 */}
          <div className='search'>
            <div className='search_left'>
              <div className='city_name'>
                <div>{this.state.cityInfo.label || '上海'}</div>
                <i className='iconfont icon-arrow'></i>
              </div>
              <div className='site_name'>
                <i className='iconfont icon-seach'></i>
                <div className='site'>请输入小区或地址</div>
              </div>
            </div>
            <i className='iconfont icon-map'></i>
          </div>
        </div>
        {/* 实现导航栏 */}
        <div className='navs'>
          {this.renderNavs()}
        </div>
        {/* 租房小组 */}
        <div className='group'>
          <h3>租房小组 <span>更多</span></h3>
          <Grid data={this.state.group} activeStyle={false} columnNum={2} square={false} hasLine={false} renderItem={item => (
            <Flex className="group-item" justify="around">
              <div className="desc">
                <p className="title">{item.title}</p>
                <span className="info">{item.desc}</span>
              </div>
              <img
                src={`http://localhost:8080${item.imgSrc}`}
                alt=""
              />
            </Flex>
          )} />

        </div>
        {/* 最新资讯 */}
        <div className='advisory'>
          <h3>最新资讯</h3>
          {this.state.advisory.map(item => (
            <div key={item.id} className='advisory_list'>
              <div className='left'>
                <img src={`http://localhost:8080${item.imgSrc}`} />
              </div>
              <div className='right'>
                <h3>{item.title}</h3>
                <div className='bottom'>
                  <span>{item.from}</span>
                  <span>{item.date}</span>
                </div>
              </div>
            </div>
          ))}

        </div>
      </div >
    )
  }
}
